import { logout } from '@/services';
import { LogoutOutlined, UserOutlined } from '@ant-design/icons';
import { Avatar, Dropdown, Space } from 'antd';
import { history, Link } from '@umijs/max';
import type { MenuProps } from 'antd';

export default (props: any, useUserModel: any) => {
  const { user, clearUser } = useUserModel;
  if (!user) {
    return [];
  }

  if (props.isMobile) return [];
  const signOut = () => {
    logout()
      .then(() => {
        history.push('/login');
        clearUser();
      })
      .catch(() => {});
  };
  // console.log(props);

  const { name, headimg } = user;

  const items: MenuProps['items'] = [
    {
      key: 'personal',
      label: (
        <Link to="/public/userInfo">
          <UserOutlined />
          个人中心
        </Link>
      ),
    },
    {
      key: 'logout',
      label: (
        <a onClick={signOut}>
          <LogoutOutlined />
          退出登录
        </a>
      ),
    },
  ];

  return [
    <div key="userinfo" className="pro-layout-custom-right">
      <Dropdown menu={{ items }}>
        <Space
          style={{
            cursor: 'pointer',
          }}
        >
          <Avatar src={headimg} size="small" />
          {!props.collapsed && <span>{name}</span>}
        </Space>
      </Dropdown>

      {/* <SelectLang className={styles.action} postLocalesData={postLocalesData} /> */}
    </div>,
  ];
};
